<template>
	<el-row style="display: flex; justify-content: space-between;align-items: center;">
			<h3>修改当前教师信息</h3>
			<p @click="che" style="cursor: pointer;">返回</p>
	</el-row>
	<div class="box">
		<el-form ref="myForm" :model="formData" :rules="rules" >
			<div class="oneblock">
				<el-form-item label="姓名:"  label-width="100" prop="teaName2">
					<el-input v-model="formData.teaName2" style="width:50%" ></el-input>
				</el-form-item>
				<el-form-item label="性别:" label-width="100" prop="teaSex2">
					<el-select v-model="formData.teaSex2" placeholder="请选择性别">
					  <el-option label="男" value="男"></el-option>
					  <el-option label="女" value="女"></el-option>
					</el-select>
				</el-form-item>
			</div>
			<div class="oneblock">
				<el-form-item label="职称:" label-width="100" prop="teaTitle2">
					<!-- <el-input v-model="formData.teaTitle2" style="width:50%"></el-input> -->
					<el-select v-model="formData.teaTitle2" placeholder="请选择职称">
					  <el-option :label="x.titleName" :value="x.titleId" v-for="x in Title" :key="x.titleId"></el-option>
					</el-select>
				</el-form-item>
		
				<el-form-item label="教学科目:"  label-width="100" prop="checkList">
					<!-- 	<el-input
						placeholder="请选择教学科目" @click="show()">
						</el-input> -->
					<el-input placeholder="请选择教学科目" suffix-icon="el-icon-arrow-right" @click="show()"  v-model="formData.checkList">
					</el-input>
				</el-form-item>
					<!-- <el-input v-model="formData.teaSub2" style="width:50%"></el-input> -->
				
			</div>
			<div class="oneblock">
				<el-form-item label="年龄:" label-width="100" prop="teaAge2">
					<el-input v-model="formData.teaAge2" style="width:50%"></el-input>
				</el-form-item>
				<el-form-item label="联系方式:" label-width="100" prop="teaPhone2">
					<el-input v-model="formData.teaPhone2" style="width:50%"></el-input>
				</el-form-item>
			</div>
			
			
		</el-form>

			<div style="margin-top: 60px;margin-left: 40px;">
				<el-button class="searchBtn" @click="teaChange(myForm)">确定</el-button>
				<el-button class="cancelBtn" @click="recover()">取消</el-button>
			</div >
		</div>
		<el-dialog
			title="请选择教学科目"
			v-model="dialogFormVisible"
			width="30%"
			center>
		 
		    <el-checkbox-group v-model="checkList">
		     <!-- <el-checkbox label="无" :value="''">无</el-checkbox> -->
		      <el-checkbox :label="x.subName" v-for="(x,index) in Subs" :value="x.subId" :key="index">{{ x.subName }}</el-checkbox> 
		    </el-checkbox-group>     
		   <template #footer>
				<el-button type="primary" @click="addrole()" class="searchBtn">确 定</el-button>
				<el-button @click="dialogFormVisible= false" class="">取 消</el-button>
			</template>
		</el-dialog>
	
</template>

<script setup lang="ts">
	import { ElMessage } from "element-plus";
	import{defineEmits,onMounted,reactive,ref} from "vue";
	import {teacherAdd,titleListOption,teacherSearchById,SubListOption,allrolelist,teacherChange} from "@/api/lqy";

	const emit = defineEmits("che")
	let dialogFormVisible=ref(false)
	let Subs=ref([]) //科目
	const getSubList=async()=>{
		let res =await SubListOption()
		// console.log(res)
		Subs.value=res
		let obj={
			subId:'',
			subName:'无'
		}
		Subs.value.push(obj)
		// console.log("科目",Subs.value)
	}
	// getSubList()
	const show=()=>{
	  dialogFormVisible.value=true
	}
	let checkList=ref([])
	const addrole=()=>{
		dialogFormVisible.value=false
		let arr=[]
		Subs.value.forEach(v=>{
	  	checkList.value.forEach(x=>{
	  		// console.log(x)
			if(v.subId==x){
				arr.push(v.subName)
			}
	  	})
		// console.log(v)
	  })
		let str	=arr.join("/")
		formData.checkList=str
	   // checkList.value=[]
	   if(checkList.value==[]){
		    formData.checkList='无'
	   }
	}
	let Title=ref([]) //职称
	//职称
	const getTitleList=async()=>{
		let res =await titleListOption()
		// console.log(res)
		Title.value=res
		// console.log("职称",Title.value)
	}
	getTitleList()
	let formData=reactive({
		teaName2:"",
		teaSex2:"",
		teaTitle2:"",
		teaClass2:"",
		teaAge2:"",
		teaPhone2:"",
		checkList:"",
		teaId2:""
	})
	//根据id查教师详情
	const getdetail=async()=>{
		await getSubList()
		let res=await teacherSearchById({
			teaId:sessionStorage.getItem("Detail")
		})
		Object.assign(NewDetail,res)
		// console.log(NewDetail)
		// console.log('id详情',res)
		formData.teaName2=res.teaName
		formData.teaSex2=res.teaSex
		formData.teaTitle2=res.teaTitle
		// formData.teaClass2=res.teaClass2
		formData.teaAge2=res.teaAge
		formData.teaPhone2=res.teaPhone
		// formData.checkList=''
		formData.teaId2=sessionStorage.getItem("Detail")
		res.subs.forEach(v=>{
			checkList.value.push(v.subId)
		})
		let arr=[]
		Subs.value.forEach(v=>{
			checkList.value.forEach(x=>{
				// console.log(x)
					if(v.subId==x){
						arr.push(v.subName)
					}
			})
				// console.log(v)
		})
		let str	=arr.join("/")
		// console.log("str",str)
		formData.checkList=str
		// console.log('formData',formData)
		// console.log("checkList",checkList.value)
		
	}
	getdetail()
	let NewDetail = reactive({})
	let myForm = ref(null)
	
	
	//表单验证
	const checkPhone=(rule:any,value:any,callback:any)=>{
		let reg=/^1[3-9][0-9]{9}$/
		if (value === '') {
		    callback(new Error('手机号不能为空'))
		  } else if (!reg.test(value)) {
		    callback(new Error("请输入正确的手机号"))
		  } else {
		    callback()
		  }
	}
	let rules=reactive<FormRules>({
		teaPhone2:[
			{
				validator:checkPhone,
				required: true,
				trigger: 'blur'
			}
		],
		teaName2:[
			{
				required: true,
				trigger: 'blur',
				message:"请假说明不能为空"
			}
		],
		teaAge2:[
			{
				required: true,
				trigger: 'blur',
				message:"请输入年龄"
			}
		],
		teaSex2:[
			{
				required: true,
				trigger: 'blur',
				message:"请选择性别"
			}
		],
		teaTitle2:[
			{
				required: true,
				trigger: 'blur',
				message:"请选择职称"
			}
		]
		// checkList:[
		// 	{
		// 		required: true,
		// 		trigger: 'blur',
		// 		message:"请选择科目"
		// 	}
		// ]
	})
	const teaChange = (formEl) => {
		formEl.validate(async valid => {
			// console.log(valid)
				if (valid) {
					let res = await teacherChange({
						teaId:Number(formData.teaId2),
						teaName:formData.teaName2,
						teaPhone:formData.teaPhone2,
						teaSubs:checkList.value,
						teaSex:formData.teaSex2,
						teaAge:formData.teaAge2,
						teaTitle:formData.teaTitle2,
					})
					ElMessage.success("教师信息修改成功")
					setTimeout(() => {
						che()
					}, 500)
				}
			})
	}
	const che = () => {
		emit("che")
	}
	onMounted(()=>{
		if(checkList.value){
			formData.checkList='无'
		}
	})
	const recover =()=>{
		emit("che")
		formData.teaName2=NewDetail.teaName,
		formData.teaAge2=NewDetail.teaAge,
		formData.teaTitle2=NewDetail.teaTitle,
		formData.teaSex2=NewDetail.teaSex,
		formData.teaPhone2=NewDetail.teaPhone
	}
</script>

<style scoped>
	.oneblock{
		/* width: 90%; */
		display: flex;
	}
   .el-input{
   	   width: 205px !important;
   	   margin-right: 10px;
   	   border: none;
   }
   .el-select{
   	   width: 205px !important;
   	   margin-right: 10px;
   	   border: none;
   }
	.top{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.top p{
		font-size: 21px;
		font-weight: 600;
	}
	.top span{
		font-size: 17px;
	}
	.box {
	  margin-top: 30px;
	  /* position: relative; */
	}
	.btn1{
		/* padding: 16px 60px; */
		border: none;
		border-radius: 4px;
		color: #fff;
		margin: 10px;
		cursor: pointer;
		background-color: #106ab1;
	}
	.btn2{
		/* padding: 16px 60px; */
		border: none;
		border-radius: 4px;
		color: #fff;
		margin: 10px;
		cursor: pointer;
		background-color: #999;
	}
	.searchBtn{
	    background-color: #106ab1;
	    border: none;
		color: white;
	}
	.cancelBtn{
	    background-color: #999999;
		color: white;
	}
	.addBtn{
	    background-color: #00a0e9;
	    border: none;
	    float: right;
	    margin-right: 20px;
		color: white;
	}
</style>